<template>
  <div>
    <!--  查询  -->
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline cardH"
      >
        <el-form-item label="参数名称">
          <!-- <el-input v-model="" size="mini" clearable placeholder="请选择年份" /> -->
          <el-date-picker
            v-model="formInline.day_time"
            type="year"
            size="mini"
            format="yyyy"
            value-format="yyyy"
            placeholder="请选择年份"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getList"
            >查询</el-button
          >
          <el-button type="primary" size="mini" @click="addList"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <!--  table  -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        size="mini"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
          <template scope="scope">
            <span>{{ parseNum(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="文件" align="center" />
        <el-table-column prop="type" label="类型" align="center" />
        <el-table-column prop="report_at" label="报告时间" align="center" />
        <el-table-column label="操作" width="500" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status < 4"
              size="mini"
              type="primary"
              @click="openConfigure(scope.row)"
              >配置</el-button
            >
            <el-button
              v-if="scope.row.status < 4"
              size="mini"
              type="primary"
              @click="viewReport(scope.row.id)"
              >待核</el-button
            >
            <!-- <el-button
              v-if="scope.row.status < 4"
              size="mini"
              type="primary"
              @click="downPdf(scope.row.id)"
              >生成</el-button
            > -->
            <el-button
              v-if="scope.row.status < 4"
              size="mini"
              type="primary"
              @click="publish(scope.row.id)"
              >发布</el-button
            >
            <el-button
              v-if="scope.row.status >= 4"
              size="mini"
              type="primary"
              @click="views(scope.row.path)"
              >浏览</el-button
            >
            <el-button
              v-if="scope.row.status >= 4"
              size="mini"
              type="primary"
              @click="doenLoad(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
      <el-pagination
        style="float: right"
        :page-size="10"
        :current-page="formInline.offset"
        layout="total, prev, pager, next, jumper"
        :total="total"
      />
    </el-card>
    <!-- 配置弹窗组件 -->
    <Configure
      ref="configure"
      :station_id="formInline.station_id"
      :report_id="report_id"
    />

    <Add ref="add" @refresh="getList" />
  </div>
</template>
<script>
import Configure from './configure'
// import PdfPage from '../../viewReport/components/PdfPage.vue'
import Add from './add.vue'

import { reportList, pushList } from '@/api/report'
// import htmlToPdf from '@/utils/htmlToPdf'
export default {
  name: 'content',
  components: {
    Configure,
    Add,
  },
  props: {
    choseData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      id: 0,
      total: 0,
      tableData: [],
      formInline: {
        offset: 1,
        limit: 15,
        sort: 'created_at',
        order: 'descending',
        station_id: null,
        day_time: this.getDay(0), // 查询年份
      },
      // 当前配置的报告 id
      report_id: null,
      ids: '',
    }
  },
  watch: {
    // 树形数据
    choseData(nVal, oVal) {
      console.log('id', nVal)
      this.formInline.station_id = nVal.id
      this.getList()
    },
    'formInline.year': {
      handler: function (nVal, oVal) {
        console.log('新值', nVal)
      },
      deep: true,
    },
  },
  created() {
    this.formInline.station_id = this.choseData.id
    this.getList()
  },
  methods: {
    open2() {
      this.$message({
        message: '发布成功',
        type: 'success',
      })
    },
    viewReport(id) {
      console.log(id)
      this.$router.push(`/report/viewReport/index?id=${id}`)
      // localStorage.setItem('reportId', id)
    },
    // 新增
    addList() {
      this.$refs.add.open()
    },
    // 发布
    publish(id) {
      console.log('id', id)
      pushList({ report_id: id }).then((res) => {
        console.log('id77', id)
        if (res.code == 200) {
          this.getList()
          this.open2()
        }
      })
    },
    // 生成
    downPdf(id) {
      // this.ids = id
      // localStorage.setItem('report', id)
      // setTimeout(() => {
      //   this.$refs.pdf.getDetails()
      // }, 1000)
      // console.log('ids', this.ids)
      // setTimeout(() => {
      //   htmlToPdf.downloadPDF(this.$refs.pdfBox, '我的PDF')
      // }, 1000)
    },
    // 浏览
    views(path) {
      window.open(path, '_blank')
    },
    // 下载
    doenLoad(list) {
      //      axios.get(url,{responseType: 'blob'})
      // .then((response) => {
      //     let name =  this.name +  '.pdf';
      //     var blob = response.data;
      //     if (window.navigator.msSaveOrOpenBlob) {
      //     navigator.msSaveBlob(blob, name);
      //     } else {
      //     var a = document.createElement('a');
      //     a.download = name;
      //     a.style.display =  "none";
      //     a.href = URL.createObjectURL(blob);;
      //     document.body.appendChild(a); // 修复firefox中无法触发click
      //     this.isLoading =  false;
      //     a.click();
      //     document.body.removeChild(a)
      //     }
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //    });
      const url = list.path
      const a = document.createElement('a')
      a.setAttribute('download', '')
      a.href = url
      a.download = list.name + '.pdf'
      a.target = 'tempiframe'
      a.click()
      window.URL.revokeObjectURL(url)
    },
    /**
     * @description: 获取表格数据
     * @author: 书童
     */
    getList() {
      reportList(this.formInline).then((res) => {
        this.tableData = res.data.list

        this.total = res.data.total
      })
    },
    /**
     * @description: 配置弹窗
     * @author: 书童
     */
    openConfigure(row) {
      this.report_id = row.id
      setTimeout(() => {
        this.$refs['configure'].open()
      }, 100)
    },
    /**
     * @description: 解析下标
     * @author: 书童
     */
    parseNum(num) {
      // (page - 1) * pageSize + scope.$index + 1
      if (this.formInline.offset === 0) {
        this.formInline.offset = 1
      }
      return (this.formInline.offset - 1) * 10 + num + 1
    },
    /**
     * @description: 获取当前时间
     * @author: 书童
     */
    getDay(day) {
      var today = new Date()
      var tYear = today.getFullYear()
      console.log(typeof tYear)
      return tYear + ''
    },
  },
}
</script>

<style lang='scss' scoped>
.cardH {
  height: 40px;
}
</style>
